import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import TodoHeader from './pages/TodoHeader/index'
import TodoMain from './pages/TodoMain/index'
import TodoFooter from './pages/TodoFooter/index'
import './styles/base.css'
import './styles/index.css'
// 任务列表数据
const todoList = [
  { id: 100, name: '吃饭', isDone: true },
  { id: 201, name: '睡觉', isDone: false },
  { id: 103, name: '打豆豆', isDone: true },
]
function App() {
  const [list, setList] = useState(todoList)

  // 添加
  const addTodo = (name) => {
    setList([...list, { id: Date.now(), name, isDone: false }])
  }

  const handleDone = (id) => {
    console.log(id)
  }

  return (
    <section className="todoapp">
      <TodoHeader addTodo={addTodo}></TodoHeader>
      <TodoMain list={list} handleDone={handleDone}></TodoMain>
      <TodoFooter></TodoFooter>
    </section>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
